<template>
  <div id="asset">
    <!--
        封装的背景组件
        比较解决资源复用性强👍
        内置slot插槽
    -->
    <bgCommon>
      <div class="bank_num">
        <p class="title">{{$t("asset.assetTitle")}}</p>
        <div class="many">
          <span>$</span>
          <span class="fontBlods">{{assetNum}}</span>
        </div>
      </div>
    </bgCommon>
    <div class="lists">
      <lists :lists="lists" @click="listClicks"/>
    </div>
  </div>
</template>

<script>
import bgCommon from "components/CommonBg";
import lists from "components/Lists";
export default {
  name: "asset",
  data() {
    return {
      assetNum: 99999999.99,
      lists: {
        type:'asset',
        listArray:[
          {
            icon: require("../../assets/eoc.png"),
            name: "EOC",
            amount: "$0.500000",
            percentage: "0.00%"
          },
          {
            icon: require("../../assets/eths.png"),
            name: "ETH",
            amount: "$0.500000",
            percentage: "0.00%"
          },
          {
            icon: require("../../assets/eth.png"),
            name: "ETH",
            amount: "$0.500000",
            percentage: "0.00%"
          }
        ]
      }
    };
  },
  methods: {
    // 跳转路由页面
    listClicks({
      currentTarget: {
        dataset: { name }
      }
    }) {
      this.$router.push({ path: "/asset_details", query: { type: name } });
    }
  },
  components: {
    bgCommon,
    lists
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl'
#asset
  positCenter(0,0,0,0,0,0)
  width 100%
  background-color $bodyBg
  .bank_num
    width rem(255)
    height rem(255)
    margin 0 auto
    text-align center
    bgImg('../../assets/bankasset_bg.png', contain)
    display flex
    flex-direction column
    justify-content center
    .title, .many
      color $fontColor
    .title
      font-size rem(14)
      margin-bottom rem(9)
    .many
      span
        font-size rem(15)
        margin-right rem(7)
      .fontBlods
        font-size rem(25)
        font-weight bold
        letter-spacing rem(-2)
  .lists
    margin-top rem(-30)
</style>
